<template>
  <div>
    <div v-if="buer">
      <template v-for="iterm in arrdata">
        <div class="newbox">{{ iterm }}<caileidata1 v-bind:mydata1="iterm"></caileidata1></div>
      </template>
    </div>
  </div>
</template>

<script>
import caileidata1 from "./caileidata1.vue";
export default {
  data() {
    return {
      buer:false,
      arrdata: [],
    };
  },
  components: { caileidata1 },
  methods: {
    change() {
     
    },
    datachange1(res) {
      var arr = [];
      res.data.forEach((el) => {
        arr.push(el.dishes);
      });
      this.arrdata = arr;
      this.buer=true;
      
    },
  },
  props: {
    mydata: {
      type: String,
      required: true,
    },
  },
  mounted() {
    this.$axios({
      url: "http://localhost:8081/zhh/caipudata",
      params: {
        title: this.mydata,
      },
    }).then((res) => {
      this.datachange1(res);
      
    });
  },
};
</script>

<style scoped>
.newbox{
  margin-top: 80px;
  font-size: 20px;
  margin-left: 180px;
}
</style>